<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .article{
            width: 300px;
            font-size: 13px;
        }
        .compA,.compB,.compC{
            padding: 5px;
            border: 1px dashed #333;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">count++</button></p>

        <comp-a></comp-a>
    </div>
</body>
<template id="compA">
    <div class="compA">
        这是组件A
        <comp-b></comp-b>
    </div>
</template>
<template id="compB">
    <div class="compB">
        这是组件B {{getCount()}}
        <button @click="setCount(getCount() - 1)">count--</button>
        <comp-c></comp-c>
    </div>
</template>
<template id="compC">
    <div class="compC">
        这是组件C {{getCount()}}
        <button @click="setCount(getCount() + 1)">count++</button>
    </div>
</template>
<script>

    // 需求: 将根组件中的数据 依次通过组件A B 传递给组件C

      // 需求: 将根组件中的数据 依次通过组件A B 传递给组件C  

    // 如果组件嵌套的层数过多 -> 父组件想要将数据传递给某个子组件就比较麻烦 => 有没有更简单的方法? 

    // 依赖注入
    // 官方提供了 provide / inject  来实现数据的跨层级传递
    // 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

    // provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。
    // inject 选项应该是：
    //     一个字符串数组，或
    //     一个对象，对象的 key 是本地的绑定名，value 是：

    Vue.component("compC",{
        data(){
            return {
            }
        },
        template:"#compC",
        methods:{
        },
        // 子(代)组件 对应属性名引入数据  this["getCount"] = 父组件["getCount"] => 函数
        inject:["getCount","setCount"]
    })


    Vue.component("compB",{
        data(){
            return {
            }
        },
        template:"#compB",
        methods:{
        },
        inject:["getCount","setCount"]
    })

    Vue.component("compA",{
        data(){
            return {
            }
        },
        template:"#compA",
        methods:{

        }
    })


    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        },

        // 提供静态数据 / 响应式数据(传入一个箭头函数)
        // provide 传入一个返回对象的函数 => 函数的this指向当前实例 
        // 1. > 函数的this指向当前实例  =>  可以依赖于当前实例中的数据
        // 2. 直接依赖当前实例的数据(对当前实例进行取值)  -> 提供还是静态属性
        //    传入一个箭头函数(函数中通过this修改数据)  -> 响应式  (注:子组件注入之后 需要作为函数调用)
       
        provide:function(){
            //  函数的this指向当前实例 

            return {
                count: this.count,  // this.count => 取出当前实例的count的值 => 1
                getCount:()=>{    // 传入一个函数( 函数的this指向当前实例)  => 被子组件对应名称引用->当子组件调用方法时 会执行当前函数 -> 重新取值
                    return this.count;  
                },
                setCount:(v)=>{
                    this.count = v;
                },
                a:10,
                b:20,
            }
        }
    })


    var a = 10;
    var obj = {
        a:a,
    }
    a++;


</script>
</html>